// 导入vue插件
const {VueLoaderPlugin} = require('vue-loader')
// js优化
const TerserPlugin =  require('terser-webpack-plugin')
// css优化
const CssMinPlugin =  require('css-minimizer-webpack-plugin')
// 安装css抽出插件 npm i mini-css-extract-plugin -D
const MiniCssExtractPlugin =  require('mini-css-extract-plugin')
// 导入清理插件  npm i clean-webpack-plugin -D
const {CleanWebpackPlugin} = require('clean-webpack-plugin')
// 导入处理html模板插件
const HtmlWebpackPlugin = require('html-webpack-plugin')
// 导入路径工具
const path = require('path')
module.exports = {
  // 优化
  optimization: {
    minimize: true,
    minimizer: [ new CssMinPlugin(),new TerserPlugin()]
  },
  // 入口
  entry:'./src/main.js',
  // 输出
  output:{
    // 目录：当前目录，下的dist目录
    path: path.resolve(__dirname,'dist'),
    // 打包好的文件名bundle.js
    filename:'bundle-[hash:7].js'
  },
  // 模式
  mode:"production", //development 开发模式, production 产品模式
  // 插件
  plugins:[
    new HtmlWebpackPlugin({template: './public/index.html'}),
    // 实例化清理插件
    new CleanWebpackPlugin(),
    // 实例化css抽出插件
     new MiniCssExtractPlugin({filename:'style-[hash:7].css'}),
     new VueLoaderPlugin()
  ],
  module:{
    rules:[
      // 处理scss npm i sass sass-loader
      {test:/\.scss/,use:["style-loader","css-loader","sass-loader"]},
      {test:/\.vue/,use:['vue-loader']},
     
      // npm i url-loader file-loader -D
      {test:/\.(png|jpg|jpeg|gif|svg|webp|ico)$/,use:[
        // 使用url-loader插件处理图片（如果图片小于1024 直接转化为base64格式）
        // [name]原来名称 [hash]哈希码 [hash:7]取7位[ext]后缀名
        // 为什么图片小的时候变base64格式，如果是图片引用一次发送http请求
        // 图片小转化base64 变成源码 减少http请求次数
        {loader:'url-loader',options:{limit:1024,name:'images/[name]-[hash:7].[ext]'}}
      ]},
      // 如果发现文件是.css结尾的，使用css-loader和style-loader处理
      // npm i css-loader style-loader -D
      // css-loader处理css style-loader把css加载到style标签
      {test:/\.css$/,use:[
        MiniCssExtractPlugin.loader,
        // "style-loader",
        "css-loader"]}
    ]
  },
  // npm i webpack-dev-server -D
  devServer:{
    proxy:{},//代理
    host:"localhost",//域名
    port:8080,//端口号
    hot:true,//热更新
    open:true,//自动打开浏览器
  },
  resolve:{
    "alias":{
      // 设置src的别名
      "@":path.resolve(__dirname,'src'),
       
    }
  },
  // 开发工具，当出错怎么报告错误
  // devtool:'eval'

}
// hash 每次打包如果发生变化，hash值会变
// contentHash  内容发生变化，hash值会变
// chunkHash  入口可以有多个，当其中一个入口发生变化 该入口的chunkhash发生变化
// hash为了提高二次加载的速度
// 浏览器去get请求地址时候发现文件名没有变之前请求过（一段时间内）从缓存里面取
// 文件没有变，文件名也就不会变化，请求同样的文件从缓存里面取
// 文件内容发生变化，文件名也就变化，请求最新文件
// 通过hash命名合理控制缓存与更新